    <style> 
    #imgtag
    {
      position:relative;
      min-width:300px;
      min-height:300px;
      float:left;
      border:solid 3px #fff;
      cursor: crosshair;
    }
    .tagview
    {
      border:solid 3px #fff;
      width:100px;
      height:100px;
      position:absolute;
      display:none;
    }
    #tagit
    {
      position:absolute;
      top:0;left:0;
      width:250px;
    }
    #tagit .box
    {
      border:solid 3px #fff;
      width:100px;
      height:100px;
      float:left;
    }
     
    #tagit .name
    {
      float:left;
      background-color:#fff;
      width:130px;
      height:80px;
      padding:5px;
    }
    #tagit div.text
    {
      margin-bottom:5px;
    }
    #tagit input[type=text]
    {
      margin-bottom:5px;
    }
    #tagit #tagname
    {
      width:110px;
    }
    #taglist
    {
      background-color:#aaa;
      width:780px;
      min-height:200px;
      height:auto !important;
      padding:10px;
      margin-left:20px;
      color:#000;
     
    }
    #taglist ol { padding:0 20px;cursor:pointer}
    #taglist ol a { }
    #taglist ol a:hover { text-decoration:underline }
    .tagtitle
    {
      font-size:14px;
      text-align:center;
      width:100%;
    }
    </style>

<link rel="stylesheet" href="/styles/thickbox.css" />
<script type="text/javascript" src="/scripts/thickbox.js"></script>
<!-- First, add jQuery (and jQuery UI if using custom easing or animation -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

	<script type="text/javascript" src="/scripts/jquery.swfupload.js"></script>
	<script type="text/javascript" src="/scripts/swfupload/swfupload.js"></script>
<!-- Second, add the Timer and Easing plugins -->
<script type="text/javascript" src="/scripts/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="/scripts/jquery.easing.1.3.js"></script>

<!-- Third, add the GalleryView Javascript and CSS files -->
<script type="text/javascript" src="/scripts/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/jquery.galleryview-3.0-dev.css" />

<!-- Lastly, call the galleryView() function on your unordered list(s) -->
<script type="text/javascript">
	$(function(){
		$('#myGallery').galleryView(
		{show_captions: true,
  		 start_frame: ${current_photo}
		}
		);
	});
</script>
<div id="blockContIn">
<table border="0" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td valign="top"><div class="Col">
	<tal:block tal:content="structure php: this.partial('index/myactivityview.html')"/>
</div></td>
	<td valign="top" width="100%"><div class="ColTrg">
<div class="ModuleBlock">
<h1>
<label>Photos</label>
<div><a href="/album/settings/album-settings"  ><img src="/images/SettingsIcon.png" border="0" alt="Settings" title="Settings" align="top" class="SetIcon"/></a>
<a href="/album/photos/all"><img src="/images/HomeIcon.png" alt="Home" width="15" height="17"  border="0"  align="top" class="SetIcon" title="Home"/></a>
<a id="create" href="javascript:void(0);" onclick="createAlbum();"><img src="/images/CreateAddIcon.png" alt="Create" width="15" height="15"  border="0"  align="top" class="SetIcon" title="Create"/></a>


</div>
</h1>
<div class="pad_a">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td valign="top">
	<div>
	<div>
    <div>
    <div class="Fleft pad_r5"><img src="/images/AlbumImg.jpg" alt="Album" title="Album" class="GryBorder" /></div>
    <div class="Fleft pad_r15">
	<?php 
			if($ctx->photoview[0]["PhotoRelations"][0]["is_owner"]==1)
			{
			$name =count($ctx->photoview).'photo(s) are added';
			$profPic = '/Uploads/users/'.$ctx->photoview[0]['photo'];
			$shareTpye = 'Shared';
			$shareIcon = 'SendIconSm.png';
			$shareAlt = "Sent";
			}
			else
			{
			$name =count($ctx->photoview).' shared by  '.$ctx->photoview[0]["first_name"];
			$profPic = '/Uploads/users/'.$ctx->photoview[0]['photo'];
			$shareTpye = 'Received';
			$shareIcon = 'ReceiveIconSm.png';
			$shareAlt = "Receive";
			}
			if(isset($ctx->photoview[0]['PhotoRelations'][0]['MyFavorites']['status']))
			{
			$favorite_status = $ctx->photoview[0]['PhotoRelations'][0]['MyFavorites']['status'];
			}
			else {
		$favorite_status = '';
		}
			
	?>
	<p class="Title">Number of photos: <?php echo count($ctx->photoview) ?></p>
    <p class="txt18"><?php echo $ctx->photoview[0]['description']; ?></p>
    <p class="txt_sm"></p>
    </div>
    <div class=" Fright"><a class="BtGray" id="Add" href="javascript:void(0);" onclick="addPhotos();">Add photos</a>
	</div>
    <div class="clear hig20"></div>
    </div>
      <div class="clear"></div>
	  	<?php 
	if($ctx->photoview[0]['PhotoRelations'][0]['is_owner']==1)
	{
			$type="photo_id";
	}
	else
	{
			$type="relation_id";
	}
//echo $user_id.'--'.$favorite_status;exit;
 ?>
	  <?php if(count($ctx->photoview)!=0) { ?>
    <div>
        <div id="bar" style="width:800px;border:1px solid #53B3E6; padding:0px 5px;">
        <tal:block tal:content="structure php: this.partial('/photos/photo-bar.html')"/>
        </div>
	
    <ul id="myGallery">
		<?php foreach($ctx->photoview as $photo) { ?>
		<li id="imgVal" value="5" class="imgThumb" >
		<img data-frame="/Uploads/album/photos/thumbnail/<?php echo $photo['photo']; ?>" src="/Uploads/album/photos/big/<?php echo $photo['photo']; ?>" title=""  value="<?php echo $photo['photo_id']; ?>" />
        <div style="position:absolute; width:300px; padding-top:100px;background:#000; z-index:1000;">asdf</div>
		</li>
		<?php } ?>
	</ul>
	<div class="clear"></div>
    </div>
	<? } else { ?>
	<p style="padding:10px 5px"><center><h2>No Photos</h2></center></p>
	<?php } ?>
    <div class="FLeft pad_t5">
    <a class="BtGray" href="javascript:void(0);" onclick="addTag();">Add a face Tags</a>
    <a class="BtGray" href="javascript:void(0);" onclick="showTag();">Added Face Tags</a>
      
    </div>
 	<div class="clear"></div>
      <div id="taglist" style="display: none;"> 
    <span class="tagtitle"><b>List of Tags</b></span> 
    <ol> 
    </ol> 
  </div>   
    <div class="clear"></div>
    </div>
	
		<div id="listContent">
						<?php if(is_array($ctx->getComments['result']) && count($ctx->getComments['result'])>0) { ?>
						
							<tal:block tal:content="structure php: this.partial('/index/photo-comments.html')"/>
						
						<? }else { ?>
							<div class="pad_t15">
							<div class="pad_b15">
							<?php if($ctx->photo_description!="") { ?>
							<p><label>Description: </label><?php echo $ctx->photo_description; ?></p>
							<? } else { ?>
							<a class="Button" href="javascript:void(0);" onclick="showTextArea();"><span>Add Description</span></a>
							<div class="clear"></div>
							<div id="div1">
							</div>
							<? } ?>
							<div class="clear"></div>
							</div>
							<div class="pad_t15">
							<p class="pad_b15"><a href="#" class="UserComment">Comments(<?php echo $ctx->getComments['resultsCount'];?>)</a></p>
							<div class="TrgComInput" style="background:#c4ebff;">
							<div class="blkCont">
							<p class="UserImg"><img src="/images/ListUserImg.jpg" /></p>
							</div>
							<div class="blkCont">
							<div class="wid278">
							<input type="text" id="comment" name="comment" value="" class="TextFile" onChange="submitComment(this,<?php echo $ctx->photo_id; ?>);" />
							</div>
							</div>
							<div class="clear"></div>
							</div>
							<p style="padding:20px 50px"><b><center><h3>No Comments </h3></center></b></p>
							</div>
							</div>
						
						<? } ?>
		<div class="clear"></div>
		</div>

	</div>
	
	</td>
  </tr>
</table>
</div>


<div class="clear"></div>
 <div id="downPagerId" class="paginat" style="padding-right:15px;"></div>
 <div class="clear"></div>
<div class="clear"></div>
</div>
</div></td>
<td valign="top">
<div class="ColBanner">
<div class="ModuleBlock">
<img src="/images/Gads.gif" /><img src="/images/Gads.gif" /></div>
</div></td>	
  </tr>
</table>
</div>
<script type="text/javascript">
//<![CDATA[
viewtag(<?php echo $ctx->photo_id; ?>);
function createAlbum()
{
	tb_show('Create Album','/album/index/create-album?&height=400&width=600','');
}
function addPhotos()
{
	//alert(<?php echo $ctx->photo_diffid; ?>+"and"+<?php echo $ctx->type; ?>);return false;
	tb_show('Upload Photos','/album/photos/add-photos?&photo_diffid='+<?php echo $ctx->photo_diffid; ?>+'&type='+<?php echo $ctx->type; ?>+'&add=add&height=400&width=600','');
}
function sharePhoto(photo_id)
{
	tb_show('Share Photo','/album/index/share-photo?&photo_id='+photo_id+'&height=300&width=600','');
}
function navigate(e) {
   
if(e.keyCode == 13)
{	
	var comment=$("#comment");			  //enter pressed
     //submitComment(comment);
	 }
  }
  
document.onkeypress=navigate;
function changeStatusFavorite(photo_id,status)
{
	//alert(album_id+"and"+status);return false;
	$.ajax({
			   
			    type: "POST",
				dataType: "json",
			    data: "photo_id="+photo_id+"&status="+status+"&type=album",
			    url: "/album/index/favorite/",
			    success: function(data){
					location.reload();					
				}
			});
}
function showTag()
	{
		$('#taglist').toggle();
	}

function submitComment(comment,photo_id)
{
	//alert(id+"and"+action);return false;
	$.ajax({
			   
			    type: "POST",
				dataType: "json",
			    data: "photo_id="+photo_id+"&album_id=0"+"&comment="+comment.value+"&type=album"+"&is_owner="+<?php echo $ctx->is_owner; ?>,
			    url: "/album/index/submit-comment/",
			    success: function(data){
					getFun(photo_id);		
				}
			});
}

function deleteComment(comment_id,photo_id)
{
     //alert(comment_id);return false;
	$.ajax({
			   
			    type: "POST",
				dataType: "json",
				data: "comment_id="+comment_id+"&type=album"+"&album_id=0&photo_id="+photo_id+"&current_page="+<?php echo $ctx->getComments['currentPage']?>+"&is_owner="+<?php echo $ctx->is_owner; ?>,
				url: "/album/index/delete-comment",
			    success: function(data){
				getFun(photo_id);			
				}
			});
}
function deletePhoto(photo_id,photo_diffid)
{
	//alert(val);return false;
	if(confirm('Do you really want to delete ?'))
	{
	 $.ajax({
			   
			    type: "POST",
				dataType: "json",
			    data: "photo_id="+photo_id+"&photo_diffid="+photo_diffid+"&delete_type="+'<?php echo $type;?>',
			    url: "/album/photos/delete-photos/",
			    success: function(data){
					location.reload();					
				}
			});					
		}	
	else {
		return false;
	}					

}

function addPhotoDescription(photo_id,is_owner)
{
	var description=document.getElementById('description').value;
	//alert(description+"and"+photo_id);return false;
	$.ajax({
			   
			    type: "POST",
				dataType: "json",
			    data: "photo_id="+photo_id+"&description="+description+"&is_owner="+is_owner,
			    url: "/album/index/add-description/",
			    success: function(data){
					getFun(photo_id);
					}					
				
			});
}
function sharePhotos(ind)
{
	if(ind=='') {
		var val = '';
		$('#check_list:checked').each(function(i){
		  val+= $(this).val()+',';
		});
		if(val == '')
		{
			alert('Please select a photo');
			return false;
		}
	} else {
		val = ind;
	}
	//alert(val);return false;
	tb_show('share Photos','/album/photos/share-photos?&photos='+val+'&photo_diffid='+<?php echo $ctx->photo_diffid; ?>+'&type='+<?php echo $ctx->type; ?>+'&height=250&width=600','');
}
function showTextArea()
{
	//alert(obj.value);return false;
	document.getElementById('div1').innerHTML = '<div class="pad_t15"><textarea id="description" name="description"></textarea><p><a class="Button" href="javascript:void(0);" onclick="addPhotoDescription(<?php echo $ctx->photo_id; ?>,<?php echo $ctx->is_owner; ?>);"><span>Add</span></a></p></div>'

}
function deleteSelectedPhotos(ind)
{
	if(ind=='') {
		var val = '';
		$('#check_list:checked').each(function(i){
		  val+= $(this).val()+',';
		});
		if(val == '')
		{
			alert('Please select a photo');
			return false;
		}
	} else {
		val = ind;
	}
	//alert(val);return false;
	$.ajax({
			   
			    type: "POST",
				dataType: "json",
			    data: "photo_id="+val+"&delete_type="+'<?php echo $type;?>',
			    url: "/album/photos/delete-selected-photos/",
			    success: function(data){
					location.reload();					
				}
			});
}
//]]>
</script>